<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title>我的信息</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Theme Styles -->
    <link href="css/ecaps.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="page-inner">
    <p class="headpic">
        <img src="images/myinfo_img/portrait.jpg" height="150" width="150" align="middle">
    </p>
    <p class="headpic">
        <button>修改头像 >> </button>
    </p>
    <div id="main-wrapper">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-white" style="background-color: rgb(225,219,159)">
                    <div class="panel-body">
                        <form class="form-horizontal" id="myInfo" method="post" action="#">
                            <div class="form-group">
                                <button id="edit" type="button"> 点击编辑 >> </button>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">昵 &nbsp &nbsp &nbsp 称 :</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" placeholder="请输入昵称" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">邮 &nbsp &nbsp &nbsp 箱 :</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="email" placeholder="请输入正确邮箱格式" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="telephone" class="col-sm-2 control-label">电 &nbsp &nbsp &nbsp 话 :</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="telephone" placeholder="请输入正确电话格式" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button  class="btn popver-show" id="handup" type="button"
                                            style="margin-top:10px;margin-bottom:-14px;" onclick="modify()">保 存
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //查询用户信息
    $.ajax({
        url: "http://www.longm.top:8080/lm/Myinfo",
        type: "POST",
        dataType:"json",
        headers: {
            "token":window.localStorage.getItem("token")
        },
        cache: false,
        async: false,
        contentType: "application/x-www-form-urlencoded",
        data: {},
        success: function (result) {
            console.log(JSON.stringify(result));
            if (result.code === 200) {
                document.getElementById("name").value=result.data.obusername;
                document.getElementById("telephone").value=result.data.phonenum;

                if (result.data.eMail != null){
                    document.getElementById("email").value=result.data.eMail;
                } else {
                    document.getElementById("email").value="未绑定";
                }
            } else {
                alert(result["message"]);
                window.location.href = "login.html";
            }
        }
    });

    //修改用户信息
    function modify() {
        var obusername = $("#name").val();
        var eMail = $("#email").val();
        var fixphone = $("#telephone").val();
        var data={
            "obusername":obusername,
            "eMail":eMail,
            "fixphone":fixphone
        }	
        $.ajax({
            url: "http://www.longm.top:8080/lm/ModifyUser",
            type: "post",
            dataType: 'json',
            headers:{
                'Content-Type':'application/json',
                "token":window.localStorage.getItem("token")
            },
            cache: false,
            async: false,
            data: JSON.stringify(data),
            contentType: "application/x-www-form-urlencoded",
            success: function (result) {
                console.log(JSON.stringify(result));
                if (result.code == 200) {
                    alert(result["message"]);
                } else {
                    alert(result["message"]);
                }
            }
        });
    };

    $(document).ready(function () {
        $("#edit").click(function () {
            document.getElementById("name").readOnly=false;
            document.getElementById("telephone").readOnly=false;
            document.getElementById("email").readOnly=false;
        });
    });

    $(document).ready(function () {
        $("#handup").click(function () {
            document.getElementById("name").readOnly=true;
            document.getElementById("telephone").readOnly=true;
            document.getElementById("email").readOnly=true;
        });
    });


</script>
</body>
</html>
